<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的朋友圈</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../assets/css/amazeui.min.css?v=2.9">
    <link rel="stylesheet" href="../assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/index.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/extend.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/icons.css?v=2.3">
</head>
<body class="bg-gray">
<!--<header data-am-widget="header" class="am-header am-header-default am-header-fixed ">

    <div class="am-header-left am-header-nav">
        <a onclick="history.go(-1)" class="widht-10s">
            <i class="icon_8"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        我的朋友圈
    </h1>


</header>-->
<section class="" id="amz-main" data-tag="css-nav">
    <div id="list" v-cloak>
        <ul v-for="userinfo in userinfos">
            <li>
                <div class="po-avt-wrap">
                    <img class="po-avt data-avt" v-bind:src="userinfo.head_icon">
                </div>
                <div class="po-cmt">
                    <div class="po-hd">
                        <p class="po-name friend-mar0"><span class="data-name">{{userinfo.name}}</span></p>
                        <div class="post">
                            <p class="friend-mar0">{{userinfo.content}}</p>
                            <p class="friend-mar0" v-for="img in userinfo.circle_imgs">
                                <img class="list-img" v-bind:src="img" style="height: 100px;margin-left: 10px" v-on:click="show(img)">
                            </p>
                        </div>
                        <p class="time friend-mar0">{{timestampToTime(userinfo.create_time)}}<span
                                class="am-padding-left-xl am-color-blue"
                                v-on:click="del(userinfo.circle_id)"><!--删除--></span></p><!--<img class="c-icon"
                                                                                              src="../assets/images/icons/c.png">-->
                    </div>
                    <div class="r" v-if="userinfo.circle_zan_logs.length!=0"></div>
                    <div class="cmt-wrap">
                        <div class="like" v-if="userinfo.circle_zan_logs.length!=0">
                            <img v-if="userinfo.circle_zan_logs.length!=0" src="../assets/images/icons/l.png">
                            <div v-for="zan in userinfo.circle_zan_logs">{{zan.user_name}}</div>
                        </div>
                        <div class="cmt-list" v-for="comment in userinfo.circle_comment_logs">
                            <p class="friend-mar0"><span>{{comment.user_name}}：</span>{{comment.content}}</p>
                            <!--                            <p class="friend-mar0"><span>鹿晗：</span>我们在国内冻成狗，我也想跟哥您去热热～</p>
                                                        <p class="friend-mar0"><span>权志龙：</span>나는 서명～</p>
                                                        <p class="friend-mar0"><span>王思聪：</span>去哪玩啊？那么爽</p>
                                                        <p class="friend-mar0">
                                                            <span class="data-name">某某科技~贾素杰</span>
                                                            回复
                                                                <span>
                                                                    王思聪
                                                                </span>
                                                                <span>
                                                                    ：
                                                                </span>
                                                            澳洲大堡礁，这边刚好是夏季，挺适合避寒的。
                                                        </p>-->
                        </div>
                    </div>
                </div>
            </li>

        </ul>
    </div>

</section>

<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/amazeui.min.js"></script>
<script src="../assets/js/vue2.2.2.min.js"></script>
<script src="../assets/common.js"></script>
<link rel="stylesheet" href="../assets/js/layui/css/layui.css">
<script type='text/javascript' src='../assets/js/layui/layui.js'></script>
</head>
<script>
    var page = {
        "page_num": '1',
        "page_size": '8'
    };
    var mask;
    var vues;
    var islast=0;
    var recount=0;
    layui.use('layer', function () {
        var layer = layui.layer;
    });
    var sessionid = getQueryString("sessionid");
    $(function () {
        setTimeout(function(){
            mask = layer.msg('正在加载', {icon: 16});
            $.ajax({
                type: 'POST',
                url: baseUrl + 'v3.0/Circle/page',
                data: JSON.stringify(page),
                contentType: 'application/json',
                headers: {'session_id': sessionid},
                success: function (data) {
                    layer.close(mask);
                    totalpage=data.total_num/data.page_size
                    //注册vue
                    vues = new Vue({
                        el: "#list",
                        data: {
                            userinfos: data.data_list
                        },
                        methods: {
                            timestampToTime: function (timestamp) { //时间戳转化成时间
                                return timestampToTime(timestamp)
                            },
                            del: function (id) {
                                alert('朋友圈id：' + id);
                            },
                            show:function(url){
                                window.location.href=url
                            }
                        }

                    })
                }
            });
        },200)
        //获取所有朋友圈

    })
    window.onscroll = function () {
        if (getScrollTop() + getWindowHeight() == getScrollHeight()) {
            nextPage();
        }

        if (getScrollTop() == 0) {
            reloadPage();
        }
    };
    function reloadPage() {
        if (totalpage<=1){
            //return;
        }
        recount++;
        if (recount==1){
            mask = layer.msg('刷新中', {icon: 16});
            page.page_num=1;
            $.ajax({
                type: 'POST',
                url: baseUrl + 'v3.0/Circle/page',
                data: JSON.stringify(page),
                contentType: 'application/json',
                headers: {'session_id': sessionid},
                success: function (data) {
                    if(data.total_num==0){
                        window.location.replace("空.html")
                    }
                    vues.userinfos = data.data_list
                    layer.close(mask);
                    setTimeout(function () {
                        recount=0;
                        islast=0;
                    },1000)
                }
            });
        }

    }

    function nextPage(){
        if (totalpage<=1){
            return;
        }
        if(islast==1){
            mask = layer.msg('最后一页了');
            setTimeout(function(){
                layer.close(mask);
            },2000)
            return;//最后一页了
        }
        mask = layer.msg('正在加载下一页', {icon: 16});
        page.page_num++;
        $.ajax({
            type: 'POST',
            url: baseUrl + 'v3.0/Circle/page',
            data: JSON.stringify(page),
            contentType: 'application/json',
            headers: {'session_id': sessionid},
            success: function (d) {
                if(d.total_num<d.page_size*d.page_num)
                {
                    islast=1;
                }
                for(var i in d.data_list)
                {
                    vues.userinfos.push(d.data_list[i]);
                }
                layer.close(mask);
            }
        });

    }
    //滚动条在Y轴上的滚动距离
    function getScrollTop() {
        var scrollTop = 0,
            bodyScrollTop = 0,
            documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }
    //文档的总高度
    function getScrollHeight() {
        var scrollHeight = 0,
            bodyScrollHeight = 0,
            documentScrollHeight = 0;
        if (document.body) {
            bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        return scrollHeight;
    }
    //浏览器视口的高度
    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }


</script>
</body>
</html>